/*
 * Holaf Utilities - Terminal Specific Styles
 */

#holaf-terminal-panel .holaf-terminal-non-terminal-view { /* Container for login/setup */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    height: 100%;
    box-sizing: border-box;
}

#holaf-terminal-panel .holaf-terminal-non-terminal-view input[type="password"],
#holaf-terminal-panel .holaf-terminal-non-terminal-view input[type="text"] {
    background-color: var(--holaf-input-background) !important;
    color: var(--holaf-text-primary) !important;
    border: 1px solid var(--holaf-border-color) !important;
    padding: 8px;
    border-radius: 3px;
    width: 220px;
    max-width: 80%;
    margin-bottom: 10px;
    box-sizing: border-box;
}

#holaf-terminal-panel .holaf-terminal-non-terminal-view input[type="password"]:focus,
#holaf-terminal-panel .holaf-terminal-non-terminal-view input[type="text"]:focus {
    border-color: var(--holaf-accent-color) !important;
    outline: none;
}

#holaf-terminal-panel .holaf-terminal-non-terminal-view p {
    color: var(--holaf-text-secondary);
    font-size: 14px;
    text-align: center;
    max-width: 300px;
    line-height: 1.5;
}

#holaf-terminal-panel .holaf-terminal-non-terminal-view h3,
#holaf-terminal-panel .holaf-terminal-non-terminal-view h4 {
    color: var(--holaf-text-primary);
    margin-top: 0;
    margin-bottom: 15px;
}

/* Wrapper for the actual xterm.js terminal view */
#holaf-terminal-panel .holaf-terminal-view-wrapper {
    flex-grow: 1;
    overflow: hidden; /* Let xterm handle its scrollbars */
    display: flex; /* Make it a flex container for its child */
    padding: 0; /* Remove any padding from the wrapper itself */
    /* The background of this wrapper should be transparent or match the panel if xterm doesn't fill it */
}

/* This is the direct container where xterm.js is mounted */
/* holaf_terminal.js creates this._xterm_container and appends it to .holaf-terminal-view-wrapper */
#holaf-terminal-panel .holaf-terminal-view-wrapper > div {
    flex-grow: 1; /* Ensure it fills the wrapper */
    width: 100% !important;
    height: 100% !important;
    display: flex; /* To make xterm's internal canvas fill it */
    flex-direction: column; 
    overflow: hidden; 
    /* Xterm.js applies its own theme background, so this div's background isn't strictly necessary
       unless there's a flash or if xterm doesn't cover 100% for some reason.
       Setting it to panel's primary background can be a safe default. */
    background-color: var(--holaf-background-primary); /* Match panel background */
}

/* Ensure xterm.js terminal itself takes full space inside its direct container (the div above) */
#holaf-terminal-panel .holaf-terminal-view-wrapper > div > .terminal { /* xterm.js creates a div with class "terminal" */
    padding: 5px !important; /* Add padding *inside* the xterm rendered area */
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box; /* Ensure padding is included in width/height */
}

/* Custom scrollbar for Terminal view - if xterm's own is not styled/sufficient */
/* This should apply to the scrollbars generated by xterm.js itself, if any.
   Often better handled by xterm's own theme and addons. */
#holaf-terminal-panel .holaf-terminal-view-wrapper .xterm-viewport::-webkit-scrollbar,
#holaf-terminal-panel .holaf-terminal-view-wrapper .terminal::-webkit-scrollbar { /* Target xterm's viewport or main terminal div */
    width: calc(10px * var(--holaf-mm-zoom-factor, 1)); /* Using --holaf-mm-zoom-factor as a proxy if terminal has zoom */
}

#holaf-terminal-panel .holaf-terminal-view-wrapper .xterm-viewport::-webkit-scrollbar-track,
#holaf-terminal-panel .holaf-terminal-view-wrapper .terminal::-webkit-scrollbar-track {
    background: var(--holaf-scrollbar-track);
}

#holaf-terminal-panel .holaf-terminal-view-wrapper .xterm-viewport::-webkit-scrollbar-thumb,
#holaf-terminal-panel .holaf-terminal-view-wrapper .terminal::-webkit-scrollbar-thumb {
    background-color: var(--holaf-scrollbar-thumb);
    border-radius: calc(5px * var(--holaf-mm-zoom-factor, 1));
    border: calc(2px * var(--holaf-mm-zoom-factor, 1)) solid var(--holaf-scrollbar-track);
}

#holaf-terminal-panel .holaf-terminal-view-wrapper .xterm-viewport::-webkit-scrollbar-thumb:hover,
#holaf-terminal-panel .holaf-terminal-view-wrapper .terminal::-webkit-scrollbar-thumb:hover {
    background-color: color-mix(in srgb, var(--holaf-scrollbar-thumb) 70%, var(--holaf-accent-color) 30%);
}